<template>
    <div id='subtmpl'>
        <button type="button" class="mui-btn inleft" @click="substrict">
            -
        </button>
        <div class="incenter" v-text="count"></div>
        <button type="button" class="mui-btn inright" @click="add">
            +
        </button>
    </div>
</template>
<script>
export default {
    props:["initCount","goodsid"],
    data() {
        return {
            count:1,
            carobj:{goodsid:0,type:'add'}
        };
    },
    created(){
        this.count = this.initCount;
    },
    methods:{
        substrict(){
            this.count--;
            if(this.count<1){
                this.count = 1;
                return;
            }
            this.sendmessage('substrict');
        },
        add(){
            this.count++;
            this.sendmessage('add');
        },
        sendmessage(type){
            this.carobj.type = type;
            this.carobj.goodsid = this.goodsid;
            this.$emit('cardataobj',this.carobj);
        }
    }
}
</script>



<style lang="css" scoped>
#subtmpl .mui-btn {
    padding: 3px 9px;
    font-size: 18px;
}
#subtmpl .incenter {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.42;
    position: relative;
    display: inline-block;
    margin-bottom: 0;
    padding: 3px 6px;
    cursor: pointer;
    -webkit-transition: all;
    transition: all;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    text-align: center;
    vertical-align: top;
    white-space: nowrap;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    background-color: #fff;
    background-clip: padding-box;
}
</style>